<template>
  <a-spin :spinning="loading">
    <div class="container">
      <div class="form-content">
        <a-form layout="inline">
          <a-form-item label="职位">
            <a-select
              placeholder="请选择职位"
              v-model:value="status"
              style="width: 150px"
              allowClear
            >
              <a-select-option :value="0">已创建</a-select-option>
              <a-select-option :value="1">已发布</a-select-option>
              <a-select-option :value="2">已暂停</a-select-option>
              <a-select-option :value="3">已关闭</a-select-option>
              <a-select-option :value="4">已招满</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="工作地">
            <a-input placeholder="请输入工作地" style="width: 150px" v-model:value="data" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" class="search-botton" @click="search">搜索</a-button>
            <a-button @click="reset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="table-content">
        <a-table
          class="table"
          :columns="columns"
          :data-source="store.positionCvCountList"
          :loading="store.loading"
          :scroll="{ x: 1500, y: 650 }"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <div v-if="column.key === 'operation'">
              <a-button type="link" size="small" @click="handleInfo(record)">详情</a-button>
              <a-popconfirm
                title="批量筛选当前职位所有简历？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="handleBatch(record)"
              >
                <a-button type="link" size="small">批量筛选</a-button>
              </a-popconfirm>
            </div>
            <div v-else-if="column.key === 'requirementList'">
              <span v-for="item in record.requirement" :key="item">{{ item }} <br /></span>
            </div>
            <div v-else-if="column.key === 'tagList'">
              <a-tag
                style="margin-top: 4px; margin-right: 8px"
                color="green"
                v-for="item in record.tags"
                :key="item"
                >{{ item }}</a-tag
              >
            </div>
          </template>
        </a-table>
      </div>
      <div class="page-content">
        <a-pagination
          v-if="store.total > 0"
          v-model:page-size="store.pageSize"
          :page-size-options="['10', '20', '50']"
          :total="store.total"
          :show-total="total => `共 ${total} 条`"
          show-size-changer
          @change="onPageChange"
        >
        </a-pagination>
      </div>
    </div>
  </a-spin>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { usePositionCvCountStore } from '@/stores/positionCvCountStore'
import { useUserStore } from '@/stores/userStore'
import { useInvitationStore } from '@/stores/invitationStore'
import server from '@/api/index'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

const userStore = useUserStore()
const store = usePositionCvCountStore()
const invitationStore = useInvitationStore()
const router = useRouter()

const columns = [
  {
    title: '职位名称',
    dataIndex: 'title',
    key: 'title',
    width: 100,
    fixed: 'left',
  },
  {
    title: '职位ID',
    dataIndex: 'positionId',
    key: 'positionId',
    width: 100,
    fixed: 'left',
  },
  {
    title: '工作地',
    dataIndex: 'location',
    key: 'location',
    width: 150,
  },
  {
    title: '应往届',
    dataIndex: 'gen',
    key: 'gen',
    width: 150,
  },
  {
    title: '简历数量',
    dataIndex: 'applicationCount',
    key: 'applicationCount',
    width: 150,
  },
  {
    title: '薪资',
    dataIndex: 'salary',
    key: 'salary',
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 220,
    fixed: 'right',
  },
]

const positionCvCountList = ref([])
const loading = ref(false)
const total = ref(0)
const pageSize = ref(10)
const status = ref('')
const data = ref('')

// 获取当前hr列表
const getMypositionCvCountList = async () => {
  try {
    const res = await server.getSimpleApplicationCountByPosition(userStore.userAccount)
    if (res.data.code === 0) {
      store.total = res.data.data
      store.positionCvCountList = res.data.data.map(item => {
        return {
          title: item.title,
          location: item.location,
          gen: item.gen,
          applicationCount: item.applicationCount,
          salary: item.salary,
          positionId: item.positionId,
        }
      })
    } else {
      message.error(`获取我的职位列表失败: ${res.data.message}`)
    }
  } catch (e) {
    message.error(`获取我的职位列表时发生错误: ${e.message}`)
  }
}
const handleBatch = async item => {
  const res = await server.predict({
    positionId: item.positionId,
  })
  if (res.data.code) {
    message.success('筛选成功')
  }
}
const handleInfo = async item => {
  console.log(item)
  invitationStore.positionId = item.positionId
  router.push('/invitationManage')
}
// 分页器处理
const onPageChange = async (page, pageSize) => {}

const search = () => {
  // 搜索逻辑
}

const reset = () => {
  // 重置逻辑
}

onMounted(() => {
  getMypositionCvCountList()
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .form-content {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0;

    .search-botton {
      margin-right: 10px;
    }
  }

  .table-content {
    padding: 15px;
  }

  .page-content {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
  }
}
</style>
